<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>仓库管理</h2>
    </div> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'warehouse@save'" size="small" type="primary" icon="el-icon-circle-plus" @click="handleCreateSelf">新增仓库</el-button>
        <el-button v-action="'warehouse@changeActiveStatus'" :disabled="!selectedIds.length" size="small" type="danger" @click="handleDisableOrEnable(0)">禁用</el-button>
        <el-button v-action="'warehouse@changeActiveStatus'" :disabled="!selectedIds.length" size="small" type="primary" @click="handleDisableOrEnable(1)">启用</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border row-key="id" :row-class-name="tableRowClassName" :max-height="screenHeigh" fit :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectMulti">
        <el-table-column type="selection" min-width="51" align="center" />
        <el-table-column label="操作" align="center" min-width="250" fixed>
          <template slot-scope="scope">
            <span v-if="getIsEdit(scope.row)" v-action="'warehouse@update'" class="edit_style" style="margin: 0;" @click="handleUpdateSelf(scope.row)">编辑</span>
            <span v-if="getIsEdit(scope.row)" v-action="'warehouse@delete'" class="delete_style" style="margin: 0;" @click="handleDelete(scope.row.id)">删除</span>
            <span v-if="getIsEditUsps(scope.row)" v-action="'warehouse@updateUspsMessage'" class="edit_style" style="margin: 0;" @click="handleSetUsps(scope.row.id, scope.row.usps_json)">设置usps账号</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" prop="name" align="center" min-width="138">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库类型" prop="type_text" align="center" min-width="110" />
        <el-table-column label="上级仓库" prop="parent_warehouse" align="center" min-width="120" />
        <el-table-column label="是否第三方仓库" align="center" min-width="221">
          <template slot-scope="scope">
            <span>{{ scope.row.is_third_part?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仓库地址" align="center" min-width="221">
          <template slot-scope="scope">
            <span v-if="scope.row.street">{{ scope.row.street }}，{{ scope.row.city }}，{{
              scope.row.state
            }}
            </span>
            <span v-else>{{ scope.row.city }}，{{ scope.row.state }} </span>
          </template>
        </el-table-column>
        <el-table-column label="仓库邮编" prop="zipcode" align="center" min-width="170" />
        <el-table-column label="状态" align="center" min-width="96">
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.is_active === 1 ? 'disable_style' : 'enable_style'
              ]"
              class="cursor_auto"
            >{{ scope.row.is_active_text }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="created_by_name" align="center" min-width="112" />
        <el-table-column label="创建时间" prop="created_at" align="center" min-width="174" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" min-width="112">
          <template slot-scope="scope">
            {{ scope.row.updated_by_name || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="updated_at" align="center" min-width="174">
          <template slot-scope="scope">
            {{ scope.row.updated_at || "-" }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 新增弹窗 -->
    <warehouse-dialog ref="warehouseDialog" @submit="addSubmitHandler" />
    <!-- 新增usps弹窗 -->
    <setUspsDialog ref="warehouseUspsDialog" @submit="addSubmitHandler" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import warehouseDialog from '../components/warehouseDialog.vue'
import cacheList from '@/layout/mixin/cacheList'
import setUspsDialog from '../components/setUspsDialog.vue'
// import Tempalant from '@/views/tempalant.vue'
export default {
  name: 'Warehouse',
  components: {
    warehouseDialog,
    setUspsDialog
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 315,
      componentName: 'Warehouse',
      url: '/warehouse', // 列表接口地址
      warehouseList: [],
      queryParam: {
        name: '',
        is_third_part: ''
      },
      formItems: [
        {
          label: '仓库名称',
          key: 'name',
          type: 'input',
          placeholder: '请输入仓库名称'
        },
        {
          label: '是否三方仓库',
          key: 'is_third_part',
          type: 'select',
          options: [
            {
              label: '是',
              value: '1'
            },
            {
              label: '否',
              value: '0'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 设置usps 账号
    handleSetUsps(id, data) {
      const vm = this
      vm.$refs['warehouseUspsDialog'].show(id, data)
    },
    // 是否编辑
    getIsEdit(row) {
      return row.type !== 4 && row.is_active === 0
    },
    // 是否编辑
    getIsEditUsps(row) {
      return row.type !== 4 && row.is_active === 0 && row.parent_id === 0
    },
    // 获取列表
    getList(params) {
      this.loading = true
      if (this.beforeSearch !== undefined) {
        this.beforeSearch()
      }
      let query = params || this.queryParam
      query = this.filterParams(query)
      this.$http
        .get('/warehouse/all', { params: query })
        .then(response => {
          if (typeof this.filterData === 'function') {
            this.data = this.filterData(response.data)
          } else {
            this.data = response.data
          }
          this.setWarehouList(this.data)
          this.handlePaginateResponse(response)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    getSelectList(arr, data) {
      data.forEach(e => {
        if (this.selectedIds.includes(e.id)) {
          arr.push(e)
        }
        if (e.children) {
          this.getSelectList(arr, e.children)
        }
      })
      return arr
    },
    /**
     * 新增成功 handler
     * */
    addSubmitHandler() {
      const vm = this
      vm.getList()
    },
    /**
     * 打开编辑弹窗
     * */
    handleUpdateSelf(item) {
      const vm = this
      vm.$refs['warehouseDialog'].show(1, item)
    },
    /**
     * 打开新增弹窗
     * */
    handleCreateSelf() {
      const vm = this
      vm.$refs['warehouseDialog'].show(0)
    },
    /**
     * 批量禁用/批量启用
     * */
    handleDisableOrEnable(isActive) {
      const vm = this
      const ids = vm.getSelectList([], vm.data)
        .filter(e => e.is_active === (isActive ? 0 : 1))
      if (ids.length !== vm.selectedIds.length) {
        return vm.$message.error(
          `所选数据必须都是${!isActive ? '启用' : '禁用'}状态`
        )
      }
      vm.$confirm(`确定${isActive ? '启用' : '禁用'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$http
          .post('/warehouse/change-active-status', {
            ids: vm.selectedIds,
            is_active: isActive
          })
          .then(response => {
            vm.$message.success('操作成功')
            vm.getList()
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
